繼上一章介紹了單向綁定，這章就來介紹一下雙向綁定。
單向綁定是能夠將 data 綁定到 html tag 上，那雙向綁定呢？！
雙向綁定顧名思義就是除了將 data 綁定到 html tag 之外，html tag 值的改變也會連動改變 data 的值。
相信可能有人看到這段文字發現了什麼。
沒錯！！就是 html tag 值(value)的改變這句。
一般的 html tag 並不會存在所謂的 value，所以 v-model 使用的情境就是在綁定 form 表單相關的元素，這些元素才存在著所謂的值(value)。
如果還是不太清楚沒關係，我們來實際的練習一下。
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
message: ''
}
})
看到這程式碼應該知道我要做什麼了吧～
我對 input 加上了雙向綁定，綁定到 message 上並透過 {{}} 渲染出來，如下：
再來另外一個練習好了，對 select 做雙向綁定：
<body>
<div id="app">
<select v-model="selected">
<option disabled value="">跑腿小弟</option>
<option value="Arel">Arel</option>
<option value="Hugh">Hugh</option>
<option value="Kai">Kai</option>
</select>
<p>今天要去買便當的是: {{ selected }}</p>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
對 select 做雙向綁定的部分，v-model 是要加在 <select>上，而不是加在 <option> 上喲！！
來看一下效果吧～
雖然說 v-model 是雙向綁定，但是其實這裡面是包含了 2 個部分。
一個是前一章提到的單向綁定 v-bind:，另外一個就是 @input。
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
實現的原理就是，先將 data 綁定到 input 上，接下來使用者在 input 輸入值時就會去觸發 v-on:input 去改變 data 的值。
v-on:input 可能不知道是什麼，他其實就是等於 js 原生的 oninput 事件。
我們在下一章就會介紹 event handling囉～
iThome鐵人賽
看影片追技術